<template>
	<view class="video-player">
		<!--#ifndef H5-->
		<video id="my-video" v-if="startTime" :src="currentDramaData.url" class="my-video" :initial-time="startTime" autoplay
		 @timeupdate="videoTimeUpdateEvent"></video>
		<!--#endif-->
		<!--#ifdef H5-->
		<view class="video-js my-video" ref="video"></view>
		<!--#endif-->
	</view>
</template>

<script>
	// #ifdef H5
	// import 'video.js/dist/video-js.css'
	import '@/static/css/my-video.css'
	// import videojs from "video.js"
	// #endif
	export default {
		data() {
			return {
				// #ifdef H5
				player: null,
				// #endif
			};
		},
		props: ['currentDramaData', 'startTime'],
		watch: {
			// #ifdef H5
			currentDramaData: function(newVal, oldVal) {
				newVal && this.getVideo(newVal)
			}
			// #endif
		},
		destroyed() {
			// #ifdef H5
			this.delVideo()
			// #endif
		},
		methods: {
			// #ifndef H5
			videoTimeUpdateEvent(e) {
				let currentTime = parseInt(e.detail.currentTime);
				this.$emit('getCurrentTime', currentTime)
			},
			// #endif

			// #ifdef H5
			getVideo(currentDramaData) {
				let url = currentDramaData.url
				let that = this;
				if (that.player) {
					that.player.reset()
					that.player.src({
						src: url,
						type: 'application/x-mpegURL',
						withCredentials: false,
					})
					let video = document.getElementById('video')
					video.setAttribute('playsinline', true)
					video.setAttribute('webkit-playsinline', true)
					video.setAttribute('x5-video-player-type', 'h5')
					that.player.load(url)
					that.player.play()
				} else {
					let video = document.createElement('video')
					video.id = 'video'
					video.style = 'width: 100%;height:100%'
					video.controls = true
					video.setAttribute('playsinline', true)
					video.setAttribute('webkit-playsinline', true)
					video.setAttribute('x5-video-player-type', 'h5')
					let source = document.createElement('source')
					source.src = url
					source.type = 'application/x-mpegURL'
					video.appendChild(source)
					that.$refs.video.$el.appendChild(video)
					that.player = videojs('video', {
						autoplay: true
					}, function() {
						this.on('timeupdate', function() {
							let currentTime = parseInt(this.currentTime()); //当前时间
							that.$emit('getCurrentTime', currentTime)
						})
					})
					that.player.currentTime(this.startTime)
				}
			},
			delVideo() {
				this.player.dispose()
			}
			// #endif
		}

	}
</script>

<style scoped>
	.my-video {
		width: 750rpx;
		height: 225px;
	}
</style>
